var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
const Welcome = React.createClass({
    getInitialState: function () {
        return {salesSituation: [], categorySalesSituation: [], activity: [], login: []}
    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/SystemsAnalysis/GetSalesSituation",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this.setState({salesSituation: data});
            },
            error: function (msg) {
                alert(msg);
            }
        });
        $.ajax({
            type: "GET",
            url: "/api/SystemsAnalysis/GetSalesByCategory",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this.setState({categorySalesSituation: data});
            },
            error: function (msg) {
                alert(msg);
            }
        });
        $.ajax({
            type: "GET",
            url: "/api/SystemsAnalysis/GetUserActivity",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this.setState({activity: data});
            },
            error: function (msg) {
                alert(msg);
            }
        });
        $.ajax({
            type: "GET",
            url: "/api/SystemsAnalysis/GetLoginSituation",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this.setState({login: data});
            },
            error: function (msg) {
                alert(msg);
            }
        });

    },
    componentDidUpdate() {
        var _this = this;
        var ctx1 = document.getElementById("myChart1");
        var myChart = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: [
                    "售出", "退款", "退货"
                ],
                datasets: [
                    {
                        label: '# 销售情况',
                        data: _this.state.salesSituation,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ]
                }
            }
        });
        var ctx2 = document.getElementById("myChart2");
        var data = {
            labels: [
                "男士", "女士", "儿童"
            ],
            datasets: [
                {
                    data: _this.state.categorySalesSituation,
                    backgroundColor: [
                        "#FF6384", "#36A2EB", "#FFCE56"
                    ],
                    hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
                }
            ]
        };
        var myDoughnutChart = new Chart(ctx2, {
            type: 'doughnut',
            data: data,
            options: {
                animation: {
                    animateScale: true
                }
            }
        });
        var activity = document.getElementById("activity");
        var activityData = {
            labels: [
                "星期一", "星期二", "星期三", "星期四", "星期五"
            ],
            datasets: [
                {
                    label: "周统计登录情况",
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1,
                    data: _this.state.activity
                }
            ]
        };
        var myBarChart = new Chart(activity, {
            type: 'bar',
            data: activityData
        });
        var login = document.getElementById("login");
        var loginData = {
            labels: [
                "周一", "周二", "周三", "周四", "周五"
            ],
            datasets: [
                {
                    data: _this.state.login,
                    backgroundColor: [
                        "#FF6384", "#36A2EB", "#FFCE56"
                    ],
                    hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
                }
            ]
        };
        var myPieChart = new Chart(login, {
            type: 'pie',
            data: loginData
        });
    },

    render() {

        return (
            <div >
                <section className="content-header">
                    <h1>
                        起始页
                        <small>欢迎使用</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">后台管理</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">起始页</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">概览</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <div className="row">
                            <section className="col-lg-5 connectedSortable">
                                <div className="nav-tabs-custom">

                                    <ul className="nav nav-tabs pull-right">
                                        <li className="active">
                                            <a href="#revenue-chart" data-toggle="tab">销售情况</a>
                                        </li>
                                        <li>
                                            <a href="#sales-chart" data-toggle="tab">种类</a>
                                        </li>
                                        <li className="pull-left header">
                                            <i className="fa fa-inbox"></i>
                                            Sales</li>
                                    </ul>
                                    <div className="tab-content no-padding">

                                        <div
                                            className="chart tab-pane active"
                                            id="revenue-chart"
                                            style={{
                                            position: "relative",
                                            height: "300px"
                                        }}>
                                            <div
                                                style={{
                                                width: "60%",
                                                height: "100%"
                                            }}>
                                                <canvas id="myChart2"></canvas>
                                            </div>
                                        </div>
                                        <div
                                            className="chart tab-pane"
                                            id="sales-chart"
                                            style={{
                                            position: "relative",
                                            height: "300px"
                                        }}>
                                            <div
                                                style={{
                                                width: "100%",
                                                height: "100%"
                                            }}>
                                                <canvas id="myChart1"></canvas>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section className="col-lg-5 connectedSortable">
                                <div className="nav-tabs-custom">

                                    <ul className="nav nav-tabs pull-right">
                                        <li className="active">
                                            <a href="#revenue-chart1" data-toggle="tab">活跃度</a>
                                        </li>
                                        <li>
                                            <a href="#sales-chart1" data-toggle="tab">登录情况</a>
                                        </li>
                                        <li className="pull-left header">
                                            <i className="fa fa-inbox"></i>
                                            User</li>
                                    </ul>
                                    <div className="tab-content no-padding">

                                        <div
                                            className="chart tab-pane active"
                                            id="revenue-chart1"
                                            style={{
                                            position: "relative",
                                            height: "300px"
                                        }}>
                                            <div
                                                style={{
                                                width: "100%",
                                                height: "10%"
                                            }}>
                                                <canvas id="activity"></canvas>
                                            </div>
                                        </div>
                                        <div
                                            className="chart tab-pane"
                                            id="sales-chart1"
                                            style={{
                                            position: "relative",
                                            height: "300px"
                                        }}>
                                            <div
                                                style={{
                                                width: "60%",
                                                height: "100%"
                                            }}>
                                                <canvas id="login"></canvas>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    <div className="box-footer"></div>
                </div>
            </div>
        )
    }
});
module.exports = Welcome;